<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>更多推荐</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/sm.min.css">
    <link rel="stylesheet" href="../css/sm-extend.min.css">
    <link rel="stylesheet" href="../css/font_size.css">
    <link rel="stylesheet" href="../css/color.css">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/my_book.css">
    <link href="../css/video-js.css" rel="stylesheet">
  	<script src="../js/videojs-ie8.min.js"></script>

</head>
<body>
<div class="page" data-page="index">
    <div class="bar">
       <header class="bar bar-nav">
        <a onclick="window.history.go(-1);"onclick="window.history.go(-1)"onclick="window.history.go(-1)" class="icon" style="width: 40%">
            <img src="../img/iconfont_back@2x.png" class="back_img">
        </a>
    </header>
    </div>

    <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" style="text-align: center">
       
        <div class="waterfall book_rec_div" style="margin-top: 44px;">
            <ul class="waterfall_ul">
            </ul>
        </div>
        <div class="infinite-scroll-preloader">
            <div class="preloader"></div>
        </div>

    </div>
</div>

<script type='text/javascript' src='../js/zepto.min.js' charset='utf-8'></script>
<script>
    $.config = {
        autoInit: true,
    }
</script>
<script type='text/javascript' src='../js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../js/sm-extend.min.js' charset='utf-8'></script>
<script src="../js/video.js"></script>
<script>
    $(function() {
        $(".swiper-container").swiper( {
                    autoplay : 5000,
                    pagination: '.swiper-pagination',
                    paginationClickable: true
        });
    });
    var loading = false;
    var maxItems = 100;
    var itemsPerLoad = 20;
    function addItems(number, lastIndex) {
        var html = '';
        for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
            html += '<li onclick="详情？bookid">'+
                    '<div class="color_white_bac book_rec_detail" >'+
            '<img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="" style="width: 100%;height: 100px" >'+
            '<div>'+
            '<div class="rec_div_book_name">小黄和小蓝<br /><font style="font-size:12px;color:#ACACAC">￥32.0</font></div>'+
          
            '</div>'+
            '</li>';
        }
        $('.infinite-scroll-bottom .waterfall_ul').append(html);

    }
    addItems(itemsPerLoad, 0);
    var lastIndex = 20;
    $(document).on('infinite', '.infinite-scroll-bottom',function() {
        if (loading) return;
        loading = true;
        setTimeout(function() {
            // 重置加载flag
            loading = false;

            if (lastIndex >= maxItems) {
                // 加载完毕，则注销无限加载事件，以防不必要的加载
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
            }

            // 添加新条目
            addItems(itemsPerLoad, lastIndex);
            // 更新最后加载的序号
            lastIndex = $('.waterfall_ul li').length;
            //容器发生改变,如果是js滚动，需要刷新滚动
            $.refreshScroller();
        }, 1000);
    });

</script>
</body>
</html>